<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="应用场景 # Smartchart提供了很多通用的图形,你可以在商店中直接使用 如果要个性化,需要你进行自定义,比如你可能需要在同一个图上展示柱形图和线性图
开发前建意先观看视屏, 了解基础说明, 视屏有点老和现在界面不一样, 目前很多功能已经做成可视化配置, 理解过程即可, 具体以文档为准
Smartchart图形开发 Smartchart数据库与图形的对话 Smartchart图形开发一 Smartchart图形开发二 获取原生echarts图形 # 首先我们在ECHART官网可能找一个你喜欢的图形, 如下简单柱形图链接: 打开我们可以看对应的option:
option = { xAxis: { type: &#39;category&#39;, data: [&#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;, &#39;Sun&#39;] }, yAxis: { type: &#39;value&#39; }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: &#39;bar&#39; }] }; 转化为smartchart图形 # 复制到Smartchart图形编辑器， 点击菜单工具&ndash;&gt;转化为smartchart， 会自动进行初步转化 接下来我们就进行下改造, 请注意对比, 你只需照着复制即可
let dataset = __dataset__ //传入dataset let legend_label = ds_rowname(dataset) //可选, 自动获取legend let xlabel = dataset[0].">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="" />
<meta property="og:description" content="应用场景 # Smartchart提供了很多通用的图形,你可以在商店中直接使用 如果要个性化,需要你进行自定义,比如你可能需要在同一个图上展示柱形图和线性图
开发前建意先观看视屏, 了解基础说明, 视屏有点老和现在界面不一样, 目前很多功能已经做成可视化配置, 理解过程即可, 具体以文档为准
Smartchart图形开发 Smartchart数据库与图形的对话 Smartchart图形开发一 Smartchart图形开发二 获取原生echarts图形 # 首先我们在ECHART官网可能找一个你喜欢的图形, 如下简单柱形图链接: 打开我们可以看对应的option:
option = { xAxis: { type: &#39;category&#39;, data: [&#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;, &#39;Sun&#39;] }, yAxis: { type: &#39;value&#39; }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: &#39;bar&#39; }] }; 转化为smartchart图形 # 复制到Smartchart图形编辑器， 点击菜单工具&ndash;&gt;转化为smartchart， 会自动进行初步转化 接下来我们就进行下改造, 请注意对比, 你只需照着复制即可
let dataset = __dataset__ //传入dataset let legend_label = ds_rowname(dataset) //可选, 自动获取legend let xlabel = dataset[0]." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://help.smartchart.cn/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/Echarts%E7%BB%84%E4%BB%B6/" /><meta property="article:section" content="docs" />



<title>Echarts组件 | Smartchart开发手册</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.c58292d36b18b675680ab9baea2029204537b839ea72f258746ec0f32ce8d6c8.css" integrity="sha256-xYKS02sYtnVoCrm66iApIEU3uDnqcvJYdG7A8yzo1sg=" crossorigin="anonymous">
  <script defer src="/flexsearch.min.js"></script>
  <script defer src="/en.search.min.87d21738ca42169aa09a9482af7c44b518afd14b108d6499bf015b55e0521daa.js" integrity="sha256-h9IXOMpCFpqgmpSCr3xEtRiv0UsQjWSZvwFbVeBSHao=" crossorigin="anonymous"></script>

  <script defer src="/sw.min.6f6f90fcb8eb1c49ec389838e6b801d0de19430b8e516902f8d75c3c8bd98739.js" integrity="sha256-b2&#43;Q/LjrHEnsOJg45rgB0N4ZQwuOUWkC&#43;NdcPIvZhzk=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->
  
</head>
<body dir="ltr">
  <input type="checkbox" class="hidden toggle" id="menu-control" />
  <input type="checkbox" class="hidden toggle" id="toc-control" />
  <main class="container flex">
    <aside class="book-menu">
      <div class="book-menu-content">
        
  <nav>
<h2 class="book-brand">
  <a class="flex align-center" href="/"><span>Smartchart开发手册</span>
  </a>
</h2>


<div class="book-search">
  <input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
  <div class="book-search-spinner hidden"></div>
  <ul id="book-search-results"></ul>
</div>












  



  
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/" class="">关于我们</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/%E8%AE%BE%E8%AE%A1%E7%90%86%E5%BF%B5/" class="">设计理念</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-c354321856ed6feb84c1b4323285de46" class="toggle"  />
    <label for="section-c354321856ed6feb84c1b4323285de46" class="flex justify-between">
      <a role="button" class="">1.基础操作</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E4%B8%93%E4%B8%9A%E7%89%88%E8%AF%B4%E6%98%8E/" class="">专业版本说明</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B/" class="">快速开始</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E4%BB%AA%E8%A1%A8%E7%9B%98/" class="">第一个仪表盘</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%A4%8D%E6%9D%82%E6%8A%A5%E8%A1%A8/" class="">第一个复杂报表</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA3D%E5%9C%BA%E6%99%AF/" class="">第一个3D场景</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AAAI%E5%9C%BA%E6%99%AF/" class="">第一个AI场景</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E4%B8%8A%E7%BA%BF%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">第一个上线数据集</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%A4%A7%E5%B1%8F%E6%A8%A1%E6%9D%BF%E8%BD%AC%E5%8C%96/" class="">第一个大屏模板转化</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%88%9B%E5%BB%BA%E8%BF%9E%E6%8E%A5%E6%B1%A0/" class="">创建连接池</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%BA%94%E7%94%A8%E6%A8%A1%E6%9D%BF/" class="">应用模板</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E6%9D%83%E9%99%90%E7%AE%A1%E7%90%86/" class="">权限管理</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-ebbdf386fef5a4b61debc89d61d0dadf" class="toggle"  />
    <label for="section-ebbdf386fef5a4b61debc89d61d0dadf" class="flex justify-between">
      <a role="button" class="">Vue相关</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/%E4%BD%BF%E7%94%A8VUE/" class="">使用 Vue</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/ElementUI/" class="">Element Ui</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/DataV%E5%BA%94%E7%94%A8/" class="">Data V应用</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-5bb75c87734dfbe4db2b79fa99d34f85" class="toggle"  />
    <label for="section-5bb75c87734dfbe4db2b79fa99d34f85" class="flex justify-between">
      <a role="button" class="">不太重要</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E4%B8%8D%E5%A4%AA%E9%87%8D%E8%A6%81/%E4%B8%BB%E9%A2%98%E5%BA%94%E7%94%A8PRO/" class="">主题应用 Pro</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E4%B8%8D%E5%A4%AA%E9%87%8D%E8%A6%81/%E5%A4%8D%E5%88%B6%E4%BB%AA%E8%A1%A8%E7%9B%98/" class="">复制仪表盘</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-54fee82a365f217fe67a17292f7959e5" class="toggle"  />
    <label for="section-54fee82a365f217fe67a17292f7959e5" class="flex justify-between">
      <a role="button" class="">2.数据集说明</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2/" class="">数据集开发界面</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/SQL%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">Sql数据集</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E6%95%B0%E6%8D%AE%E5%88%B7%E6%96%B0/" class="">数据集数据刷新</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-17dce050c02e560c36fb8bcb52fc8432" class="toggle"  />
    <label for="section-17dce050c02e560c36fb8bcb52fc8432" class="flex justify-between">
      <a role="button" class="">特殊数据源</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/API%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">Api数据集</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/%E4%BD%BF%E7%94%A8EXCEL%E6%95%B0%E6%8D%AE/" class="">使用 Excel数据</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/Python%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">Python数据集</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">自定义数据源</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/webSocket%E6%96%B9%E5%BC%8F/" class="">Web Socket方式</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/Elasticsearch%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Elasticsearch数据源</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/JDBC%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Jdbc数据源</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/kafka%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Kafka数据源</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/mongodb%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Mongodb数据源</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/promitheus%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Promitheus数据源</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/Redis%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Redis数据源</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/sqlalchemy%E8%BF%9E%E6%8E%A5/" class="">Sqlalchemy连接</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/%E5%90%91%E9%87%8F%E6%95%B0%E6%8D%AE%E5%BA%93/" class="">向量数据库</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/%E9%82%AE%E4%BB%B6%E5%8F%91%E9%80%81%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">邮件发送数据源</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-b696a5333fb0b6aa0ada2335e5fe864c" class="toggle"  />
    <label for="section-b696a5333fb0b6aa0ada2335e5fe864c" class="flex justify-between">
      <a role="button" class="">数据集形态</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E5%BD%A2%E6%80%81/%E5%85%B1%E4%BA%AB%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">共享数据集</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E5%BD%A2%E6%80%81/%E6%95%B0%E6%8D%AE%E9%9B%86%E6%87%92%E5%8A%A0%E8%BD%BD/" class="">数据集懒加载</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-c5a4ac1635ece2dfef28e23678ea9e21" class="toggle" checked />
    <label for="section-c5a4ac1635ece2dfef28e23678ea9e21" class="flex justify-between">
      <a role="button" class="">3.图形开发</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E5%9F%BA%E7%A1%80%E5%9B%BE%E5%BD%A2/" class="">基础图形</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%AE%A1%E7%90%86%E5%9B%BE%E5%BD%A2/" class="">管理图形</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/Echarts%E7%BB%84%E4%BB%B6/" class="active">Echarts组件</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/HTML%E7%BB%84%E4%BB%B6/" class="">Html组件</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E8%B0%83%E8%AF%95%E6%97%A5%E5%BF%97/" class="">调试日志</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-8b7ef748294c9611ad2ef758768793c4" class="toggle"  />
    <label for="section-8b7ef748294c9611ad2ef758768793c4" class="flex justify-between">
      <a role="button" class="">函数方法</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E5%87%BD%E6%95%B0%E6%96%B9%E6%B3%95/%E5%9B%BE%E5%BD%A2%E7%AB%AF%E6%95%B0%E6%8D%AE%E5%87%BD%E6%95%B0/" class="">图形端数据函数</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E5%87%BD%E6%95%B0%E6%96%B9%E6%B3%95/Jquery%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95/" class="">Jquery遍历方法</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-4e8eda9dcb8eb0bfa033731d4401df15" class="toggle"  />
    <label for="section-4e8eda9dcb8eb0bfa033731d4401df15" class="flex justify-between">
      <a role="button" class="">特殊图形</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/LineUp%E5%9B%BE%E5%BD%A2/" class="">Line Up图形</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E4%BD%BF%E7%94%A8%E5%9B%BE%E6%A0%87/" class="">使用图标</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E6%97%A0%E7%BC%9D%E6%BB%9A%E5%8A%A8/" class="">无缝滚动</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2%E5%8A%A0%E8%BD%BD/" class="">特殊图形加载</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-30aee618b2f055fbebe03b9acabc9330" class="toggle"  />
    <label for="section-30aee618b2f055fbebe03b9acabc9330" class="flex justify-between">
      <a role="button" class="">Element Ui组件</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/ElementUI%E7%BB%84%E4%BB%B6/%E5%B8%A6%E5%88%86%E9%A1%B5%E7%9A%84%E8%A1%A8%E6%A0%BC/" class="">带分页的表格</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-478b5d3161d3129d62529b01d6fb834c" class="toggle"  />
    <label for="section-478b5d3161d3129d62529b01d6fb834c" class="flex justify-between">
      <a role="button" class="">4.布局说明</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E5%B8%83%E5%B1%80%E6%8C%87%E5%BC%95/" class="">布局指引</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%8B%96%E6%8B%BD%E8%87%AA%E5%8A%A8%E5%AF%B9%E9%BD%90/" class="">拖拽自动对齐</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E5%88%A0%E9%99%A4%E5%AE%B9%E5%99%A8/" class="">删除容器</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-86bbf1d771d855758065f951675b7ee7" class="toggle"  />
    <label for="section-86bbf1d771d855758065f951675b7ee7" class="flex justify-between">
      <a role="button" class="">5.参数及联动钻取</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E5%8F%82%E6%95%B0%E7%BC%96%E5%86%99%E6%96%B9%E6%B3%95/" class="">参数编写方法</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E5%9B%BE%E5%BD%A2%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/" class="">图形联动钻取</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E7%AD%9B%E9%80%89%E5%99%A8%E6%8C%87%E5%8D%97/" class="">筛选器指南</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E7%BB%84%E4%BB%B6%E8%87%AA%E5%AE%9A%E4%B9%89%E8%81%94%E5%8A%A8/" class="">组件自定义联动</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-1a4301e6dac08bd3bdb48c3500ec971d" class="toggle"  />
    <label for="section-1a4301e6dac08bd3bdb48c3500ec971d" class="flex justify-between">
      <a role="button" class="">6.进阶开发 Pro</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-3b9f1904c5bd48ec9e224dbf4f4a7d54" class="toggle"  />
    <label for="section-3b9f1904c5bd48ec9e224dbf4f4a7d54" class="flex justify-between">
      <a role="button" class="">低代码开发</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2/" class="">模板开发界面</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E5%BF%AB%E6%8D%B7%E5%BC%80%E5%8F%91/" class="">快捷开发</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E4%B8%8A%E4%BC%A0%E8%B5%84%E6%BA%90%E6%96%87%E4%BB%B6/" class="">上传资源文件</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E8%BE%B9%E6%A1%86%E4%B8%8E%E8%A3%85%E9%A5%B0/" class="">边框与装饰</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E6%A0%B7%E5%BC%8F%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B/" class="">样式快速上手</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/IDE%E5%BC%80%E5%8F%91%E6%A8%A1%E5%BC%8F/" class="">ID E开发模式</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C/" class="">动画效果</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E7%BC%96%E8%BE%91%E5%99%A8%E5%BF%AB%E6%8D%B7%E9%94%AE/" class="">编辑器快捷键</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-2b5b070b11b526d911f2143b53347842" class="toggle"  />
    <label for="section-2b5b070b11b526d911f2143b53347842" class="flex justify-between">
      <a role="button" class="">数据服务</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1%E8%AE%BE%E5%AE%9A/" class="">数据服务设定</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1API/" class="">数据服务 API</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E4%B8%8B%E8%BD%BD/" class="">数据下载</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E5%A1%AB%E6%8A%A5/" class="">数据填报</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E5%90%8E%E5%8F%B0API%E5%88%B7%E6%96%B0/" class="">后台 Api刷新</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E5%A4%87%E4%BB%BD%E6%81%A2%E5%A4%8D%E5%8F%8A%E7%89%88%E6%9C%AC/" class="">备份恢复及版本</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A6%96%E9%A1%B5/" class="">自定义首页</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E9%9B%86%E6%88%90AI%E7%94%9F%E6%88%90/" class="">集成 Ai生成</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-bfe0709421fcc9cc6742d70724a0841d" class="toggle"  />
    <label for="section-bfe0709421fcc9cc6742d70724a0841d" class="flex justify-between">
      <a role="button" class="">7.报表嵌入</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/7.%E6%8A%A5%E8%A1%A8%E5%B5%8C%E5%85%A5/%E7%AE%80%E5%8D%95%E5%B5%8C%E5%85%A5/" class="">简单嵌入</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/7.%E6%8A%A5%E8%A1%A8%E5%B5%8C%E5%85%A5/%E5%8D%95%E7%82%B9%E7%99%BB%E5%BD%95/" class="">单点登录</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/7.%E6%8A%A5%E8%A1%A8%E5%B5%8C%E5%85%A5/%E5%8D%95%E9%A1%B5%E9%9D%A2%E5%B5%8C%E5%85%A5/" class="">单页面嵌入</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-50ddcd837bca405840b973f89ee4c795" class="toggle"  />
    <label for="section-50ddcd837bca405840b973f89ee4c795" class="flex justify-between">
      <a role="button" class="">8. Django应用</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/8.Django%E5%BA%94%E7%94%A8/%E5%B5%8C%E5%85%A5Django-Apps/" class="">嵌入 Django Apps</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/8.Django%E5%BA%94%E7%94%A8/FAQ/" class="">Faq</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-b7c8fb0b06f0332d83d8a5dbf7287f20" class="toggle"  />
    <label for="section-b7c8fb0b06f0332d83d8a5dbf7287f20" class="flex justify-between">
      <a role="button" class="">9. Jupyter应用</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/9.Jupyter%E5%BA%94%E7%94%A8/Jupyter%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95/" class="">Jupyter中使用指引</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-3f5ca2fcf9ff7a0e49dc6f9a1c867e71" class="toggle"  />
    <label for="section-3f5ca2fcf9ff7a0e49dc6f9a1c867e71" class="flex justify-between">
      <a role="button" class="">10.其它</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/10.%E5%85%B6%E5%AE%83/FAQ/" class="">Faq</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/10.%E5%85%B6%E5%AE%83/%E8%AF%95%E7%94%A8%E6%BF%80%E6%B4%BB%E8%AF%B4%E6%98%8E/" class="">试用激活说明</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-1221ac066d992a43b363728eac9711d8" class="toggle"  />
    <label for="section-1221ac066d992a43b363728eac9711d8" class="flex justify-between">
      <a role="button" class="">11.部署指南</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-df28c15db9b442124658f06e614fc60b" class="toggle"  />
    <label for="section-df28c15db9b442124658f06e614fc60b" class="flex justify-between">
      <a role="button" class="">Linux</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Linux/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B/" class="">快速开始</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Linux/SQLite3%E7%89%88%E6%9C%AC%E9%94%99%E8%AF%AF/" class="">Sqlite3版本错误</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Linux/%E7%94%9F%E4%BA%A7%E9%83%A8%E7%BD%B2/" class="">生产部署</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-1c911073b1023b05de57d665aa6300d6" class="toggle"  />
    <label for="section-1c911073b1023b05de57d665aa6300d6" class="flex justify-between">
      <a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Windows/" class="">Windows</a>
    </label>
  

          
  <ul>
    
  </ul>

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>











  
<ul>
  
  <li>
    <a href="https://www.smartchart.cn/"  target="_blank" rel="noopener">
        官网
      </a>
  </li>
  
  <li>
    <a href="https://gitee.com/smartchart/smartchart"  target="_blank" rel="noopener">
        Gitee
      </a>
  </li>
  
</ul>






</nav>




  <script>(function(){var e=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(){localStorage.setItem("menu.scrollTop",e.scrollTop)}),e.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>


 
      </div>
    </aside>

    <div class="book-page">
      <header class="book-header">
        
  <div class="flex align-center justify-between">
  <label for="menu-control">
    <img src="/svg/menu.svg" class="book-icon" alt="Menu" />
  </label>

  <strong>Echarts组件</strong>

  <label for="toc-control">
    
    <img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
    
  </label>
</div>


  
  <aside class="hidden clearfix">
    
  
<nav id="TableOfContents">
  <ul>
    <li>
      <ul>
        <li>
          <ul>
            <li><a href="#应用场景">应用场景</a></li>
            <li><a href="#获取原生echarts图形">获取原生echarts图形</a></li>
            <li><a href="#转化为smartchart图形">转化为smartchart图形</a></li>
            <li><a href="#tips">TIPS:</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>



  </aside>
  
 
      </header>

      
      
  <article class="markdown"><h3 id="应用场景">
  应用场景
  <a class="anchor" href="#%e5%ba%94%e7%94%a8%e5%9c%ba%e6%99%af">#</a>
</h3>
<p>Smartchart提供了很多通用的图形,你可以在商店中直接使用
如果要个性化,需要你进行自定义,比如你可能需要在同一个图上展示柱形图和线性图</p>
<p>开发前建意先观看视屏, 了解基础说明, 视屏有点老和现在界面不一样,
<strong>目前很多功能已经做成可视化配置, 理解过程即可, 具体以文档为准</strong></p>
<ul>
<li>
  <a href="https://www.bilibili.com/video/BV1us4y117tj" title="图形开发">Smartchart图形开发</a></li>
<li>
  <a href="https://www.bilibili.com/video/BV1Gt4y1F7Ra" title="图形开发">Smartchart数据库与图形的对话</a></li>
<li>
  <a href="https://www.bilibili.com/video/BV1X3411t7DQ/" title="图形开发">Smartchart图形开发一</a></li>
<li>
  <a href="https://www.bilibili.com/video/BV1t34y1R7Z8/" title="图形开发">Smartchart图形开发二</a></li>
</ul>
<h3 id="获取原生echarts图形">
  获取原生echarts图形
  <a class="anchor" href="#%e8%8e%b7%e5%8f%96%e5%8e%9f%e7%94%9fecharts%e5%9b%be%e5%bd%a2">#</a>
</h3>
<p>首先我们在ECHART官网可能找一个你喜欢的图形, 如下简单柱形图链接:

  <a href="https://echarts.apache.org/examples/zh/editor.html?c=bar-simple">
  <img referrerpolicy="no-referrer" src="https://images.gitee.com/uploads/images/2021/0701/144039_824e0d48_5500438.png" alt="输入图片说明" title="屏幕截图.png"/></a></p>
<p>打开我们可以看对应的option:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">option</span> <span style="color:#f92672">=</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">xAxis</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">type</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;category&#39;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">data</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#39;Mon&#39;</span>, <span style="color:#e6db74">&#39;Tue&#39;</span>, <span style="color:#e6db74">&#39;Wed&#39;</span>, <span style="color:#e6db74">&#39;Thu&#39;</span>, <span style="color:#e6db74">&#39;Fri&#39;</span>, <span style="color:#e6db74">&#39;Sat&#39;</span>, <span style="color:#e6db74">&#39;Sun&#39;</span>]
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">yAxis</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">type</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;value&#39;</span>
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">series</span><span style="color:#f92672">:</span> [{
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">data</span><span style="color:#f92672">:</span> [<span style="color:#ae81ff">120</span>, <span style="color:#ae81ff">200</span>, <span style="color:#ae81ff">150</span>, <span style="color:#ae81ff">80</span>, <span style="color:#ae81ff">70</span>, <span style="color:#ae81ff">110</span>, <span style="color:#ae81ff">130</span>],
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">type</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;bar&#39;</span>
</span></span><span style="display:flex;"><span>    }]
</span></span><span style="display:flex;"><span>};
</span></span></code></pre></div><h3 id="转化为smartchart图形">
  转化为smartchart图形
  <a class="anchor" href="#%e8%bd%ac%e5%8c%96%e4%b8%basmartchart%e5%9b%be%e5%bd%a2">#</a>
</h3>
<p>复制到Smartchart图形编辑器， 点击菜单工具&ndash;&gt;转化为smartchart， 会自动进行初步转化

  <img referrerpolicy="no-referrer" src="https://images.gitee.com/uploads/images/2021/0701/144446_3f9cbf1e_5500438.png" alt="输入图片说明" title="屏幕截图.png"/></p>
<p>接下来我们就进行下改造, 请注意对比, 你只需照着复制即可</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">dataset</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">__dataset__</span> <span style="color:#75715e">//传入dataset
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">legend_label</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">ds_rowname</span>(<span style="color:#a6e22e">dataset</span>) <span style="color:#75715e">//可选, 自动获取legend
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">xlabel</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">dataset</span>[<span style="color:#ae81ff">0</span>].<span style="color:#a6e22e">slice</span>(<span style="color:#ae81ff">1</span>) <span style="color:#75715e">//x轴的标签列
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">dataset</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">ds_createMap</span>(<span style="color:#a6e22e">dataset</span>) <span style="color:#75715e">//转化成KV格式
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">//初始化series
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">series</span><span style="color:#f92672">=</span>[];
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">series</span>.<span style="color:#a6e22e">push</span>({
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">data</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">dataset</span>[<span style="color:#a6e22e">legend_label</span>[<span style="color:#ae81ff">0</span>]], <span style="color:#75715e">//对应的第一个图列
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        <span style="color:#a6e22e">type</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;bar&#39;</span>
</span></span><span style="display:flex;"><span>    });
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">series</span>.<span style="color:#a6e22e">push</span>({
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">data</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">dataset</span>[<span style="color:#a6e22e">legend_label</span>[<span style="color:#ae81ff">1</span>]], <span style="color:#75715e">//对应的第二个图列
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        <span style="color:#a6e22e">type</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;line&#39;</span>
</span></span><span style="display:flex;"><span>    });
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">option__name__</span><span style="color:#f92672">=</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">xAxis</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">type</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;category&#39;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">data</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">xlabel</span> <span style="color:#75715e">//X轴的标签
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">yAxis</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">type</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;value&#39;</span>
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">series</span><span style="color:#f92672">:</span><span style="color:#a6e22e">series</span>,
</span></span><span style="display:flex;"><span>};
</span></span></code></pre></div><p>这样一个柱形+线性图就出来了</p>
<p>
  <a href="https://www.smartchart.cn/echart/editor_min/?chartid=61" title="线柱混合图">
  <img referrerpolicy="no-referrer" src="https://www.smartchart.cn/media/media/photo/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20191110144542.png" alt="线柱混合图" title="线柱混合图"/></a></p>
<p>当然一个图形还有很多其它的元素, 比如标题, legend, 等等  更多option的配置项, 可以点击”！“号图标查看，你可以直接参考echarts的设定， <strong>完全一样！！</strong></p>
<p>以下我们做了些简单的修改</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">option__name__</span>  <span style="color:#f92672">=</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">title</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;自定义图示例&#39;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">left</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;center&#39;</span>
</span></span><span style="display:flex;"><span>    }, <span style="color:#75715e">//定义标题的显示
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    <span style="color:#a6e22e">tooltip</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">trigger</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;item&#39;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">formatter</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;{a} &lt;br/&gt;{b} : {c}&#39;</span>  <span style="color:#75715e">//鼠标移动提示的格式
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">legend</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">left</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;left&#39;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">data</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">legend_label</span>
</span></span><span style="display:flex;"><span>    }, <span style="color:#75715e">//定义图例的显示
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    <span style="color:#a6e22e">xAxis</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">type</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;category&#39;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">data</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">xlabel</span>
</span></span><span style="display:flex;"><span>    }, <span style="color:#75715e">//定义X轴的显示
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    <span style="color:#a6e22e">yAxis</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">type</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;value&#39;</span>
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>	<span style="color:#75715e">//图例定义
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    <span style="color:#a6e22e">series</span><span style="color:#f92672">:</span><span style="color:#a6e22e">series</span>,
</span></span><span style="display:flex;"><span>};
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">//关于自动化series, 可以参考以下代码
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">series</span> <span style="color:#f92672">=</span>[];
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">i</span><span style="color:#f92672">=</span><span style="color:#ae81ff">1</span>;<span style="color:#a6e22e">i</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">dataset</span>[<span style="color:#ae81ff">0</span>].<span style="color:#a6e22e">length</span>;<span style="color:#a6e22e">i</span><span style="color:#f92672">++</span>){
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">series</span>.<span style="color:#a6e22e">push</span>({<span style="color:#a6e22e">type</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;bar&#39;</span>})
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p><strong>Smartchart让你使用echarts没有门槛</strong></p>
<h3 id="tips">
  TIPS:
  <a class="anchor" href="#tips">#</a>
</h3>
<h4 id="如果你在图形编辑器中可以显示图形但保存后在dashboard中无法显示">
  如果你在图形编辑器中可以显示图形，但保存后在dashboard中无法显示
  <a class="anchor" href="#%e5%a6%82%e6%9e%9c%e4%bd%a0%e5%9c%a8%e5%9b%be%e5%bd%a2%e7%bc%96%e8%be%91%e5%99%a8%e4%b8%ad%e5%8f%af%e4%bb%a5%e6%98%be%e7%a4%ba%e5%9b%be%e5%bd%a2%e4%bd%86%e4%bf%9d%e5%ad%98%e5%90%8e%e5%9c%a8dashboard%e4%b8%ad%e6%97%a0%e6%b3%95%e6%98%be%e7%a4%ba">#</a>
</h4>
<ul>
<li>检查下所有的myChart, option是否都有转化成带__name__</li>
<li>检查代码中有使用到mychart.setoption，这样你可以在代码下方加上</li>
</ul>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#a6e22e">myChart__name__</span>.<span style="color:#a6e22e">setOption</span>(<span style="color:#a6e22e">option__name__</span>);
</span></span></code></pre></div><ul>
<li>检查代码中是否有 let data = xx, 如果有改成 data =</li>
</ul>
</article>
 
      

      <footer class="book-footer">
        
  <div class="flex flex-wrap justify-between">




  <div>
    <a class="flex align-center" href="https://gitee.com/smartchart/smartchartDoc/edit/master/content/docs/3.%e5%9b%be%e5%bd%a2%e5%bc%80%e5%8f%91/Echarts%e7%bb%84%e4%bb%b6.md" target="_blank" rel="noopener">
      <img src="/svg/edit.svg" class="book-icon" alt="Edit" />
      <span>Edit this page</span>
    </a>
  </div>


</div>



  <script>(function(){function e(e){const t=window.getSelection(),n=document.createRange();n.selectNodeContents(e),t.removeAllRanges(),t.addRange(n)}document.querySelectorAll("pre code").forEach(t=>{t.addEventListener("click",function(){if(window.getSelection().toString())return;e(t.parentElement),navigator.clipboard&&navigator.clipboard.writeText(t.parentElement.textContent)})})})()</script>


 
        
      </footer>

      
  
  <div class="book-comments">

</div>
  
 

      <label for="menu-control" class="hidden book-menu-overlay"></label>
    </div>

    
    <aside class="book-toc">
      <div class="book-toc-content">
        
  
<nav id="TableOfContents">
  <ul>
    <li>
      <ul>
        <li>
          <ul>
            <li><a href="#应用场景">应用场景</a></li>
            <li><a href="#获取原生echarts图形">获取原生echarts图形</a></li>
            <li><a href="#转化为smartchart图形">转化为smartchart图形</a></li>
            <li><a href="#tips">TIPS:</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>


 
      </div>
    </aside>
    
  </main>

  
</body>
</html>












